<template>
  <div class="indexhead">
    <span class="iconfont new iconnew"></span>

    <div class="search" @click="$router.push('/Search')">
      <span class="iconfont iconsearch"></span>
      <input type="text" value="搜索新闻" />
    </div>
    <span class="iconfont iconwode" @click="$router.push('/index')"></span>
  </div>
</template>

<script>
</script>

<style lang="less" scoped>
.indexhead {
  padding: 0 18px;
  background-color: red;
  color: white;
  display: flex;
  align-items: center;
  .iconnew {
    font-size: 60px;
  }
  .search {
    position: relative;
    flex: 1;
    .iconsearch {
      position: absolute;
      left: 60px;
      top: 8px;
      font-size: 18px;
    }
    input {
      margin-left: 10px;
      width: 210px;
      height: 34px;
      text-align: center;
      border-radius: 34px;
      border: none;
      background-color: #f97979;
    }
  }
  .iconwode {
    font-size: 28px;
    opacity: 0.8;
  }
}
</style>